<template>
    <div>
        <Menu :theme="theme" :style="'width: '+menuWidth+'px;'" @on-select="onSelect">
            <template v-for="(item, componentIndex) in menus">
                <!-- 展开并且有子菜单 -->
                <Submenu v-if="!isCollapsed && item.children.length" v-bind:key="componentIndex" :name="componentIndex">
                    <template slot="title">
                        <Icon :type="item.icon"/>
                        <span v-show="!isCollapsed">{{ item.name }}</span>
                    </template>
                    <MenuItem v-for="(children, index) in item.children" :key="index" :name="children.to"
                              :to="children.to">
                        {{ children.name }}
                    </MenuItem>
                </Submenu>

                <!-- 展开但没有子菜单 -->
                <MenuItem v-else-if="!isCollapsed" :name="item.to" :to="item.to" v-bind:key="componentIndex">
                    <Icon :type="item.icon"/>
                    <span v-show="!isCollapsed">{{ item.name }}</span>
                </MenuItem>

                <!-- 不展开有子菜单 -->
                <Dropdown v-else-if="isCollapsed && item.children.length" v-bind:key="componentIndex"
                          placement="right-start" class="menu-dropdown">
                    <MenuItem :name="item.to" :to="item.to">
                        <Icon :type="item.icon"/>
                        <span v-show="!isCollapsed">{{ item.name }}</span>
                    </MenuItem>
                    <DropdownMenu slot="list">
                        <DropdownItem v-for="(children, index) in item.children" :key="index"
                                      :style="'margin: 0 0;padding: 0 0; background-color:'+bgColor">
                            <MenuItem :name="children.to" :to="children.to">{{ children.name }}</MenuItem>
                        </DropdownItem>
                    </DropdownMenu>
                </Dropdown>

                <!-- 不展开无子菜单 -->
                <Tooltip v-else-if="isCollapsed" :content="item.name" placement="right" v-bind:key="componentIndex">
                    <MenuItem :name="item.to" :to="item.to">
                        <Icon :type="item.icon"/>
                        <span v-show="!isCollapsed">{{ item.name }}</span>
                    </MenuItem>
                </Tooltip>
            </template>
        </Menu>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex';
    export default {
        name: "LeftMenu",
        data() {
            return {
                title: "Home",
                isCollapsed: localStorage.getItem("isCollapsed") ? JSON.parse(localStorage.getItem("isCollapsed")) : false,
                menuWidth: localStorage.getItem("menuWidth") ? Number(localStorage.getItem("menuWidth")) : 200,
                bgColor: localStorage.getItem("bgColor") ? localStorage.getItem("bgColor") : "#515a6e",
                keepAliveList: [],
                menus: [
                    // {
                    //     name: "主页",
                    //     to: "index",
                    //     icon: "ios-home-outline",
                    //     children: []
                    // },
                    // {
                    //     name: "流程管理",
                    //     icon: "md-git-branch",
                    //     to: "",
                    //     children: [
                    //         {
                    //             name: "流程设计",
                    //             to: "design"
                    //         },
                    //         {
                    //             name: "流程管理",
                    //             to: "manage"
                    //         },
                    //         {
                    //             name: "申请事项",
                    //             to: "apply"
                    //         },
                    //         {
                    //             name: "待办事项",
                    //             to: "backlog"
                    //         },
                    //         {
                    //             name: "已办事项",
                    //             to: "finished"
                    //         },
                    //         {
                    //             name: "业务表单",
                    //             to: "designForm"
                    //         },
                    //     ]
                    // },
                    // {
                    //     name: "权限管理",
                    //     icon: "ios-people",
                    //     to: "",
                    //     children: [
                    //         {
                    //             name: "用户信息",
                    //             to: "user"
                    //         },
                    //         {
                    //             name: "角色信息",
                    //             to: "role"
                    //         },
                    //         {
                    //             name: "权限资源",
                    //             to: "permission"
                    //         },
                    //         {
                    //             name: "部门资源",
                    //             to: "depart"
                    //         }
                    //     ]
                    // },
                    // {
                    //     name: "代码生成",
                    //     icon: "md-cloud-done",
                    //     to: "",
                    //     children: [
                    //         {
                    //             name: "代码生成",
                    //             to: "generate"
                    //         }
                    //     ]
                    // },
                    // {
                    //     name: "系统监控",
                    //     icon: "md-eye",
                    //     to: "",
                    //     children: [
                    //         {
                    //             name: "服务器",
                    //             to: "server"
                    //         },
                    //         {
                    //             name: "系统字典",
                    //             to: "dict"
                    //         },
                    //         {
                    //             name: "定时任务",
                    //             to: "quartz"
                    //         }
                    //     ]
                    // }
                ],
                breads: []
            };
        },
        props: ['theme'],
        computed: {
            ...mapState("permission", ["addRouters"]),
        },
        created() {
            this.initMenus();
            // 初始化数据
            localStorage.setItem("isCollapsed", this.isCollapsed)
            localStorage.setItem("menuWidth", this.menuWidth)
        },
        methods: {
            initMenus(){
                let menus  = JSON.parse(JSON.stringify(this.addRouters));
                this.menus = menus.map(menu => {
                    let it = {}
                    it.name = menu.name ? menu.name : ""
                    it.to = menu.path ? menu.path : ""
                    it.icon = menu.icon ? menu.icon : "ios-warning-outline"
                    it.children = []
                    this.subMenus(it,menu.children)
                    return it;
                })
                console.log("左侧菜单：",this.menus);
            },
            subMenus(it, child) {
                if (child && child.length > 0) {
                    it.children = child.map(menu => {
                        let it1 = {}
                        it1.name = menu.name ? menu.name : ""
                        it1.to = menu.path ? menu.path : ""
                        it1.icon = menu.icon ? menu.icon : "ios-warning-outline"
                        it1.children = []
                        this.subMenus(it1,menu.children)
                        return it1;
                    })
                }
            },
            openOrClose() {
                this.isCollapsed = !this.isCollapsed;
                this.menuWidth = this.isCollapsed ? 60 : 200;
                localStorage.setItem("isCollapsed", this.isCollapsed)
                localStorage.setItem("menuWidth", this.menuWidth)
            },
            onSelect(name) {
                console.log(this.menu);
            },
            //皮肤
            changeSkin() {
                this.theme = localStorage.getItem("theme")
                this.bgColor = localStorage.getItem("bgColor")
            }
        }
    }
</script>

<style scoped>

</style>
